%boxSizing{
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  -o-box-sizing: border-box;
}
.weather{
  padding : 0 3%;
  .top{
    height: 72px;

    .weather-list{
      li{
        float:left;width:23.5%;
      }
      li:nth-of-type(n+2){margin-left:2%;}
      li:nth-of-type(1) {
        .city {
          text-align: left;
          @extend %boxSizing;
          padding: 10% 2%;
          height: 72px;

          p {
            color: #ffffff;
            font-size: .8rem;
            margin-top: 10%;
            font-weight: bold;
            padding : 3% 8%;
          }
          p:nth-of-type(2) {
            margin-top: 5%
          }
        }
      }
      li:nth-of-type(2){
        .pm {
          line-height:31px;
          height:31px;
          div:nth-of-type(1){
            float:left;
            width: 50%;
            height: 100%;
            line-height:43px;
            img{
              width: 25px;height: 22px;
              padding:3% 0;
            }
          }
          div:nth-of-type(2){
            float:left;
            width:50%;
            height:100%;
            span{
              color:#fff;
              font-size:1rem;
              vertical-align:middle;
              font-weight:bold;
            }
          }
        }
        .no{
          line-height: 31px;
          margin-top: 10px;
          height: 31px;
          div:nth-of-type(1){
            float:left;
            width:50%;
            height:100%;
            line-height: 46px;
            img{width: 22px;height: 25px;}
          }
          div:nth-of-type(2){
            float:left;
            width:50%;
            height:100%;
            span{
              vertical-align:middle;
              font-size:1rem;
              color:#fff;
              font-weight:bold;
            }
          }
        }
      }
      li:nth-of-type(n+3) {
        height:31px;
        margin-top: 41px;
        .coandso {
          line-height: 31px;
          height: 31px;
          div:nth-of-type(1) {
            float:left;
            height: 100%;
            width: 40%;
            line-height:44px;
            img {
              width: 22px;
              height: 22px;
            }
          }
          div:nth-of-type(2) {
            float:left;
            height: 100%;
            width: 60%;
            span {
              vertical-align: middle;
              color: #fff;
              font-size: 1rem;
              font-weight: bold;
            }
          }
        }
      }
    }
  }
  .bot{
    margin-top:10px;
    height: 72px;
    .weather-botlist{
      li{float:left;height: 72px;}
      li:nth-of-type(1){width:23.5%;
        .air{
          line-height:36px;
          height: 72px;
          div:nth-of-type(1){
            line-height:46px;
            width:50%;
            height:50%;
            float:left;
            img{width: 27px;height: 19px;}
          }
          div:nth-of-type(2){
            float:left;
            width:50%;
            height:50%;
            span{
              color:#fff;
              font-size:1rem;
              font-weight:bold;
            }
          }
        }
        div:nth-of-type(3){
          float:left;
          width:100%;
          line-height: 36px;
          height: 36px;
          background:rgba(255,255,255,0.4);
          color: #424242;
          font-size:0.7rem;
        }
      }
      li:nth-of-type(n+2){margin-left:2%;}
      li:nth-of-type(2){width:23.5%;
        .amount{
          height: 72px;
          div:nth-of-type(1){
            color:#fff;
            height: 36px;
            line-height:36px;
            font-size:1rem;
            font-weight:bold;
            span{
              font-size:1rem;
              font-weight:bold;
            }
          }
        }
        div:nth-of-type(2){
          width:100%;
          height: 36px;
          background:rgba(255,255,255,0.4);
          p{
            line-height: 20px;
            margin:0 auto;
            //float:right;
            text-align:left;
            color: #424242;
            font-size:0.7rem;
            width:72%;
            height:50%;
          }
        }
      }
      li:nth-of-type(3){
        margin-left:2%;width:49%;
        .aqi{
          height: 72px;
          div:nth-of-type(1){
            float:left;
            width:50%;
            height:50%;
            line-height:50px;
            img{width: 43px;height: 25px;}
          }
          div:nth-of-type(2){
            float:left;
            width:50%;
            height:50%;
            line-height:36px;
            span{
              color:#fff;
              margin-top: 5px;
              margin-left: 5px;
              font-size:1rem;
              font-weight:bold;
              vertical-align: middle;
            }
          }
        }
        div:nth-of-type(3){
          float:left;
          width:100%;
          height:50%;
          line-height:36px;
          background:rgba(255,255,255,0.4);
          color: #424242;
          font-size:0.7rem;
        }
      }
    }
  }
}

